<template>
	<view class="container" :style="{backgroundColor:pageinfo.bgcolor}">
		<block v-if="platform=='wx' && homeNavigationCustom == 2">
			<view class="navigation"
				:style="{height:(44+statusBarHeight)+'px','background':navigationBarBackgroundColor}">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<view class='navcontent'>
					<view class="topinfo">
						<image class="topinfoicon" :src="sysset.logo" />
						<view class="topinfotxt" :style="{color:navigationBarTextStyle}">{{sysset.name}}</view>
					</view>
					<view class="topsearch" :style="{width:(screenWidth-210)+'px'}" @tap="goto"
						data-url="/pages/shop/search">
						<image src="/static/img/search.png" />
						<text style="font-size:24rpx;color:#999">Search for interested businesses</text>
					</view>
				</view>
			</view>
			<view style="width:100%;" :style="{height:(44+statusBarHeight)+'px'}"></view>
		</block>

		<block v-if="sysset.mode == 1">
			<view class="navigation" :style="{height:(44)+'px','background':navigationBarBackgroundColor}">
				<view class='navcontent'>
					<view class="topinfo">
						<image class="topinfoicon" :src="sysset.logo" />
						<view class="topinfotxt" :style="{color:navigationBarTextStyle,width:'auto'}">{{sysset.name}}
						</view>
					</view>
					<view class="topR">
						<text class="btn-text" @tap="goto" data-url="pages/business/clist2">[toggle]</text>
						<!-- Distance 589m， -->
						<block v-if="sysset.address">{{sysset.address}}</block>
					</view>
				</view>
			</view>
			<view style="width:100%;" :style="{height:(44)+'px'}"></view>
		</block>

		<block v-if="sysset.showgzts">
			<view style="width:100%;height:88rpx"> </view>
			<view class="follow_topbar">
				<view class="headimg">
					<image :src="sysset.logo" />
				</view>
				<view class="info">
					<view class="i">Welcome <text :style="{color:t('color1')}">{{sysset.name}}</text></view>
					<view class="i">Follow the official account to enjoy more exclusive services</view>
				</view>
				<view class="sub" @tap="showsubqrcode" :style="{'background-color':t('color1')}">Follow now</view>
			</view>
			<uni-popup id="qrcodeDialog" ref="qrcodeDialog" type="dialog">
				<view class="qrcodebox">
					<image :src="sysset.qrcode" @tap="previewImage" :data-url="sysset.qrcode" class="img" />
					<view class="txt">Long press to identify the QR code to follow</view>
					<view class="close" @tap="closesubqrcode">
						<image src="/static/img/close2.png" style="width:100%;height:100%" />
					</view>
				</view>
			</uni-popup>
		</block>

		<dp :pagecontent="pagecontent" :menuindex="menuindex"></dp>
		<view class="ggdialog" v-if="guanggaopic && hideguanggao==0">
			<view class="main">
				<!-- <view class="close" @tap="closegg"><image src="/static/img/close.png"></image></view> -->
				<image :src="guanggaopic" class="guanggaopic" @tap="goto" :data-url="guanggaourl" mode="widthFix">
				</image>
				<view class="close2" @tap="closegg">
					<image src="/static/img/close2.png" style="width:100%;height:100%" />
				</view>
			</view>
		</view>
		<view class="bobaobox" v-if="oglist.length>0">
			<swiper style="position:relative;height:54rpx;width:450rpx;" autoplay="true" :interval="5000"
				vertical="true">
				<swiper-item v-for="(item, index) in oglist" :key="index" @tap="goto"
					:data-url="'/pages/shop/product?id=' + item.proid" class="flex-y-center">
					<image :src="item.headimg"
						style="width:40rpx;height:40rpx;border:1px solid rgba(255,255,255,0.7);border-radius:50%;margin-right:4px">
					</image>
					<view
						style="width:400rpx;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;font-size:22rpx">
						{{item.nickname}} {{item.showtime}}bought {{item.name}}</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="copyright!=''" class="copyright">{{copyright}}</view>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				platform: app.globalData.platform,
				homeNavigationCustom: app.globalData.homeNavigationCustom,
				navigationBarBackgroundColor: app.globalData.navigationBarBackgroundColor,
				navigationBarTextStyle: app.globalData.navigationBarTextStyle,

				id: 0,
				pageinfo: [],
				pagecontent: [],
				hideguanggao: 0,
				sysset: {},
				title: "",
				oglist: [],
				guanggaopic: "",
				guanggaourl: "",
				copyright: '',
				latitude: '',
				longitude: '',
				statusBarHeight: 20,
				screenWidth: 375,
				business: [],
			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			var sysinfo = uni.getSystemInfoSync();

			this.statusBarHeight = sysinfo.statusBarHeight;
			this.screenWidth = sysinfo.screenWidth;

			this.getdata();
		},
		onPullDownRefresh: function(e) {
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				var opt = this.opt
				var id = 0;
				if (opt.select_bid) {
					var select_bid = opt.select_bid;
					app.setCache('select_bid', select_bid);
				} else {
					var select_bid = app.getCache('select_bid');
				}

				if (opt && opt.id) {
					id = opt.id;
				}
				that.loading = true;
				app.get('ApiIndex/index', {
					id: id,
					latitude: that.latitude,
					longitude: that.longitude,
					select_bid: select_bid
				}, function(data) {
					that.loading = false;
					if (data.status == 2) {
						//付费查看
						app.goto('/pages/pay/pay?fromPage=index&id=' + data.payorderid + '&pageid=' + that.id,
							'redirect');
						return;
					}
					if (data.status == 1) {
						var pagecontent = data.pagecontent;
						that.title = data.pageinfo.title;
						that.oglist = data.oglist;
						that.guanggaopic = data.guanggaopic;
						that.guanggaourl = data.guanggaourl;
						that.pageinfo = data.pageinfo;
						that.pagecontent = data.pagecontent;
						that.copyright = data.copyright;
						that.sysset = data.sysset;
						if (data.sysset.mode == 1 && data.business) {
							that.business = data.business;
							if (select_bid == '')
								app.setCache('select_bid', data.business.id);
						}
						uni.setNavigationBarTitle({
							title: data.pageinfo.title
						});
						that.loaded();
						if (that.latitude == '' && that.longitude == '' && data.needlocation) {
							app.getLocation(function(res) {
								that.latitude = res.latitude;
								that.longitude = res.longitude;
								that.getdata();
							});
						}
					} else {
						if (data.msg) {
							app.alert(data.msg, function() {
								if (data.url) app.goto(data.url);
							});
						} else if (data.url) {
							app.goto(data.url);
						} else {
							app.alert('You don it have permission to view');
						}
			 	}
				});
			},
			closegg: function() {
				this.hideguanggao = 1;
			},
			showsubqrcode: function() {
				this.$refs.qrcodeDialog.open();
			},
			closesubqrcode: function() {
				this.$refs.qrcodeDialog.close();
			},
		}
	}
</script>
<style>
	.topR {
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: #666;
	}

	.topR .btn-text {
		margin: 0 10rpx;
		color: #333;
	}

	.follow_topbar {
		height: 88rpx;
		width: 100%;
		max-width: 640px;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		z-index: 13;
	}

	.follow_topbar .headimg {
		height: 64rpx;
		width: 64rpx;
		margin: 6px;
		float: left;
	}

	.follow_topbar .headimg image {
		height: 64rpx;
		width: 64rpx;
	}

	.follow_topbar .info {
		height: 56rpx;
		padding: 16rpx 0;
	}

	.follow_topbar .info .i {
		height: 28rpx;
		line-height: 28rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.follow_topbar .info {
		height: 80rpx;
		float: left;
	}

	.follow_topbar .sub {
		height: 48rpx;
		width: auto;
		background: #FC4343;
		padding: 0 20rpx;
		margin: 20rpx 16rpx 20rpx 0;
		float: right;
		font-size: 24rpx;
		color: #fff;
		line-height: 52rpx;
		border-radius: 6rpx;
	}

	.qrcodebox {
		background: #fff;
		padding: 50rpx;
		position: relative;
		border-radius: 20rpx
	}

	.qrcodebox .img {
		width: 400rpx;
		height: 400rpx
	}

	.qrcodebox .txt {
		color: #666;
		margin-top: 20rpx;
		font-size: 26rpx;
		text-align: center
	}

	.qrcodebox .close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		margin-left: -25rpx;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		padding: 8rpx
	}

	.ggdialog {
		position: fixed;
		z-index: 11;
		width: 100%;
		max-width: 640px;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
	}

	.ggdialog .main {
		width: 80%;
		height: 80%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: -40rpx
	}

	.ggdialog .close {
		position: absolute;
		padding: 20rpx;
		top: -80rpx;
		right: -40rpx
	}

	.ggdialog .close image {
		width: 40rpx;
		height: 40rpx;
	}

	.ggdialog .guanggaopic {
		max-width: 100%;
		height: auto;
		max-height: 100%
	}

	.ggdialog .close2 {
		width: 50rpx;
		height: 50rpx;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		padding: 8rpx;
		margin-top: 40rpx
	}

	.bobaobox {
		position: fixed;
		top: calc(var(--window-top) + 180rpx);
		left: 20rpx;
		z-index: 10;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 30rpx;
		color: #fff;
		padding: 0 10rpx
	}

	.navigation {
		width: 100%;
		height: 64px;
		background: #fff;
		position: fixed;
		z-index: 99
	}

	.navcontent {
		display: flex;
		align-items: center;
		height: 44px;
		padding-left: 10px
	}

	.navcontent .topinfo {
		display: flex;
		align-items: center;
	}

	.navcontent .topinfoicon {
		width: 17px;
		height: 17px;
		border-radius: 4px
	}

	.navcontent .topinfotxt {
		margin-left: 6px;
		font-size: 14px;
		font-weight: 600;
		width: 70px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.navcontent .topsearch {
		width: 150px;
		height: 32px;
		background: #f2f2f2;
		border-radius: 16px;
		color: #232323;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px
	}

	.navcontent .topsearch image {
		width: 14px;
		height: 15px;
		margin-right: 6px
	}
</style>
